<script setup lang="ts">
import {ref} from 'vue'
import {EnumViewType} from '@renderer/assets/types';

import {useSystemSettingStore} from '@renderer/store/pinia/systemSetting'
const systemSettingStore = useSystemSettingStore();
const colorSelectVisible = ref<boolean>(false)


const currentView =  ref(EnumViewType.ax)

const selectColor = color => {
  colorSelectVisible.value = false
  systemSettingStore.updateDefaultCrossSetting('crossColor',currentView.value, color)
}
const showColorSelect = viewType => {
  colorSelectVisible.value = true
  currentView.value = viewType
}

const selectCrossLineWidth = val => {
  systemSettingStore.updateDefaultCrossSetting('crossLineWidth','',val)
}
</script>

<template>
  <v-row >
    <v-col class="font-weight-bold !ml-[10px] text-xl">定位十字线</v-col>
  </v-row>
  <v-row  align="center" dense>
    <v-col class="!ml-[25px] text-lg">十字线颜色</v-col>
  </v-row>

  <template v-for="viewType in [EnumViewType.ax, EnumViewType.sag, EnumViewType.cor]"
            :key="viewType" >
    <v-row  align="center" class="w-full h-[40px] mb-2   !pl-[35px]" no-gutters >
      <v-col  cols="3" class="flex items-center text-lg !ml-[10px]">{{viewType}}</v-col>
      <v-col class="h-full items-center" cols="6">
        <v-text-field
          density="compact"
          hide-details
          :model-value="systemSettingStore.crossColor[viewType]"
          @click="showColorSelect(viewType)"> </v-text-field>
      </v-col>
      <v-col cols="1" class="h-full">
        <v-btn   @click="showColorSelect(viewType)"
                 height="40"
                 :color="systemSettingStore.crossColor[viewType]"></v-btn>
      </v-col>
    </v-row>
  </template>


  <v-row  align="center" dense>
    <v-col cols="3" class="!ml-[25px] text-lg">十字线粗细</v-col>

    <v-col cols="6" class="">
      <v-select
        :model-value="systemSettingStore.crossLineWidth"
        @update:model-value="selectCrossLineWidth"
        single-line
        hide-details
        density="compact"
        label="Select"
        :items="systemSettingStore.crossLineWidthOptions"
        variant="outlined"
      ></v-select>
    </v-col>
    <v-col class=" flex items-center  text-lg">px</v-col>
  </v-row>

  <v-dialog v-model="colorSelectVisible"
            width="auto">
    <div >
      <v-color-picker
        :model-value="systemSettingStore.crossColor[currentView]"
                      @update:model-value="selectColor"></v-color-picker>
    </div>
  </v-dialog>
</template>

<style scoped>

</style>
